<template>
  <div class="shopcart">
    <div class="content" @click='toggleList'>
      <div class="content-left">
        <div class="logo-wrapper">
          <div class="logo" :class="{'highlight':totalCount > 0}" ref= 'count'>
            <i class="icon-shopping_cart"></i>
          </div>
          <div class="num" v-show='totalCount > 0'>{{totalCount}}</div>
        </div>
        <div class="price" :class="{'highlight':totalPrice > 0}">￥{{totalPrice}}</div>
        <div class="desc">另需配送费￥{{deliveryPrice}}元</div>
      </div>
      <div class="content-right" @click.stop='pay'>
        <div class="pay" :class="payClass">
          {{payDesc}}
        </div>
      </div>
    </div>
    <div class="ball-container">
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div  v-show='isClick' class="ball">
        <div class="inner"></div>
      </div>
      </transition>
    </div>
    <transition name='fold'>
    <div class="shopcart-list" v-show='listShow'>
      <div class="list-header">
        <h1 class="title">购物车</h1>
        <span class="empty" @click='empty'>清空</span>
      </div>
      <div class="list-content">
        <ul>
          <li class="food" v-for='food in selectFoods' :key='food.name'>
            <span class="name">{{food.name}}</span>
            <div class="price">
              <span>￥{{food.price*food.count}}</span>
            </div>
            <div class="cartcontrol-wrapper">
              <cartcontrol :food='food'></cartcontrol>
            </div>
          </li>
        </ul>
      </div>
    </div>
    </transition>
    <transition name='fade'>
    <div class="list-mask" v-show='listShow' @click='hidelist'>
    </div>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import cartcontrol from '../cartcontrol/cartcontrol'
  export default{
    data() {
      return {
        listShow: false // 是否显示(这是折叠和显隐两种变化)
      }
    },
    methods: {
      beforeEnter(el) {
        let x = this.$refs.count.getBoundingClientRect().left
        let y = this.$refs.count.getBoundingClientRect().top
        let xValue = this.$store.state.position.clientX - x - 20
        let yValue = this.$store.state.position.clientY - y - 20
        el.style.transform = `translate(0, ${yValue}px)`
        el.firstChild.style.transform = `translate(${xValue}px, 0)`
      },
      enter(el, done) {
          // 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
          let xiaoGuo = el.offsetWidth
          el.style.transform = 'translate(0, 0)'
          el.style.transition = 'all 0.5s ease-in'
          el.firstChild.style.transform = 'translate(0, 0)'
          el.firstChild.style.transition = 'all 0.5s ease-out'
          done() // done()调用的是afterEnter(el)函数
      },
      afterEnter(el) {
        this.$store.state.isClick = false
      },
      toggleList() {
        if (this.totalCount > 0) {
          this.listShow = !this.listShow
          if (this.listShow) {
            this.$nextTick(() => {
              if (!this.scroll) {
              this.scroll = new BScroll('.list-content', {click: true})
            } else {
              this.scroll.refresh()
            }
            })
          }
        } else {
          this.listShow = false
        }
      },
      empty() {
        this.selectFoods.forEach((food) => {
          food.count = 0
          this.listShow = false
        })
      },
      hidelist() {
        this.listShow = false
      },
      pay() {
        if (this.totalPrice > this.minPrice) {
          alert(`支付${this.totalPrice}元`)
        }
      }
    },
    computed: {
      deliveryPrice() {
        return this.$store.state.seller.deliveryPrice
      },
      minPrice() {
        return this.$store.state.seller.minPrice
      },
      selectFoods() {
        return this.$store.getters.selectFoods
      },
      totalPrice() {
        let total = 0
        this.selectFoods.forEach((food) => {
          total += food.price * food.count
        })
        return total
      },
      totalCount() {
        let count = 0
        this.selectFoods.forEach((food) => {
          count += food.count
        })
        return count
      },
      payDesc() {
        if (this.totalPrice === 0) {
          return `￥${this.minPrice}元起送`
        } else if (this.totalPrice < this.minPrice) {
          let diff = this.minPrice - this.totalPrice
          return `还差￥${diff}元起送`
        } else {
          return '去结算'
        }
      },
      payClass() {
        if (this.totalPrice < this.minPrice) {
          return 'not-enough'
        } else {
          return 'enough'
        }
      },
      isClick() {
        return this.$store.state.isClick
      }
    },
    components: {cartcontrol}
  }
</script>
<style lang='stylus' rel="stylesheet/stylus" scoped>
  @import '../../common/stylus/mixin.styl'
  .shopcart{
    position: fixed
    left:0
    bottom:0
    width:100%
    height:48px
    z-index:50
    .content{
      display:flex
      font-size:0
      background:#141d27
      .content-left{
        flex:1
        .logo-wrapper{
          display:inline-block
          position:relative
          top:-10px
          margin:0 12px
          padding:6px
          width: 56px
          height: 56px
          background:#141d27
          box-sizing: border-box
          vertical-align:top
          border-radius:50%
          .logo{
            width:100%
            height:100%
            border-radius:50%
            text-align:center
            background:#2b343c
            &.highlight{
              background:rgb(0, 160, 220)
              .icon-shopping_cart{
                color:#fff
              }
            }
            .icon-shopping_cart{
              line-height:44px
              font-size: 24px
              color:#80858a
            }
          }
          .num{
            position:absolute
            top:0
            right:0
            width:24px
            height:16px
            line-height: 16px
            text-align:center
            border-radius:16px
            font-size: 9px
            font-weight:700
            color:#fff
            background:rgb(240,20,20)
            box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.4)
          }
        }
        .price{
          display:inline-block
          margin-top:12px
          vertical-align:top
          line-height:24px
          box-sizing: border-box
          padding-right:12px
          border-right:1px solid rgba(255,255,255,0.1)
          font-size: 16px
          font-weight:700
          color:rgba(255,255,255,0.4)
          &.highlight{
            color:#fff
          }
        }
        .desc{
          display:inline-block
          vertical-align:top
          line-height:24px
          margin: 12px 0 0 12px
          color:rgba(255,255,255,0.4)
          font-size:10px
        }
      }
      .content-right{
        flex:0 0 105px
        width:105px
        .pay{
          height:48px
          color:rgba(255,255,255,0.4)
          font-size:12px
          font-weight: 700
          line-height: 48px
          text-align:center
          &.not-enough{
            background:#2b343c
          }
          &.enough{
            background: #00b43c
            color:#fff
          }
        }

      }
    }
    .ball-container{
      .ball{
        position:fixed
        left:32px
        bottom: 22px
        z-index: 200
        .inner{
          width: 16px
          height: 16px
          border-radius:50%
          background: rgb(0,160,220)
        }
      }
    }
    .shopcart-list{
      position: absolute
      left:0
      top: 0
      z-index: -1
      width: 100%
      transform:translate3d(0,-100%,0)
      &.fold-enter,&.fold-leave-to{
        transform:translate3d(0,0,0)
      }
      &.fold-enter-to,&.fold-leave{
        transform:translate3d(0,-100%,0)
      }
      &.fold-enter-active,&.fold-leave-active{
        transition:all 1s linear
      }
      .list-header{
        height:40px
        line-height: 40px
        padding:0 18px
        background:#f3f5f7
        border-bottom:1px solid rgba(7,17,27,0.1)
        .title{
          float: left
          font-size: 14px
          color:rgb(7,17,27)
        }
        .empty{
          float:right
          font-size:12px
          color:rgb(0,160,220)
        }
      }
      .list-content{
        padding:0 18px
        max-height:217px
        overflow: hidden
        background:#fff
        .food{
          position: relative
          padding: 12px 0
          box-sizing: border-box
          border-1px(rgba(7,17,27,0.1))
          .name{
            line-height: 24px
            font-size: 14px
            color:rgb(7,17,27)
          }
          .price{
            position:absolute
            right: 90px
            bottom: 12px
            line-height: 24px
            font-size:14px
            font-weight:700
            color:rgb(240,20,20)
          }
          .cartcontrol-wrapper{
            position:absolute
            right:0
            bottom:6px
          }
        }
      }
    }
    .list-mask{
      position: fixed
      top: 0
      left: 0
      width: 100%
      height: 100%
      z-index:-10
      background: rgba(7,17,27,0.6)
      backdrop-filter:blur(10px)
      &.fade-enter,&.fade-leave-to{
        opacity: 0
        background: rgba(7,17,27,0)
      }
      &.fade-enter-to,&.fade-leave{
        opacity: 1
        background: rgba(7,17,27,0.6)
      }
      &.fade-enter-active,&.fade-leave-active{
        transition:all 1s linear
      }
    }
  }
</style>
